<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加器材</title>
    <style>
        body {
            background-color: #f1f1f1;
            font-size: 16px;
            font-family: Arial, sans-serif;
        }

        h1, label {
            font-weight: bold;
            color: #333;
        }

        form {
            padding: 20px 36px 20px 20px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            margin: 50px auto;
            max-width: 600px;
        }

        input[type=text], select, textarea {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 100%;
            margin-bottom: 20px;
        }

        input[type=button] {
            background-color: #000;
            color: #fff;
            padding: 10px 15px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        input[type=button]:hover {
            background-color: #595757;
        }
    </style>
</head>
<body>
<form id="studentForm">
    <label for="name">器材名称：</label>
    <input type="text" id="name" name="name" placeholder="器材名称">
    <label for="price">器材单价：</label>

    <input type="text" id="price" name="price" placeholder="器材单价">
    <label for="count">器材数量：</label>

    <input type="text" id="count" name="count" placeholder="器材数量">
    <label>器材状态：</label>
    <select name="status" id="status">
        <option value="0">未投入使用</option>
        <option value="1">已投入使用</option>
    </select>
    <label for="buy_time">采购时间：</label>
    <input type="date" id="buy_time" name="buy_time" placeholder="购买时间">

    <br>
    <br>
    <input type="button" value="添加" onclick="addFitnessEquipment()">
</form>

<script src="js/jquery.js"></script>
<script src="js/utils.js"></script>
<script>

    function addFitnessEquipment() {
        // 定义字段及对应的提示信息
        var fields = [
            {id: 'name', name: '器材名称', value: ''},
            {id: 'price', name: '器材单价', value: ''},
            {id: 'count', name: '器材数量', value: ''},
            {id: 'status', name: '器材状态', value: ''},
            {id: 'buy_time', name: '购买时间', value: ''},

        ];

        // 获取表单数据并进行空值判断
        var hasEmptyField = false;
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            field.value = $('#' + field.id).val().trim();
            if (field.value === '') {
                alert(field.name + '不能为空');
                hasEmptyField = true;
                break;
            }
        }

        // 如果有空值，则直接返回
        if (hasEmptyField) {
            return;
        }

        // 构造表单数据对象
        var formData = {
        };
        for (var j = 0; j < fields.length; j++) {
            formData[fields[j].id] = fields[j].value;
        }
        if (formData.name==undefined||formData.name==""){
            alert("器材名称不能为空")
            return;
        }
        if (formData.price==undefined){
            alert("器材单价不能为空")
            return;

        }
        if (formData.price<=0){
            alert("器材单价必须大于0")
            return;

        }
        if (formData.count==undefined){
            alert("器材数量不能为空")
            return;
        }
        if (formData.count<=0){
            alert("器材数量必须大于0")
            return;
        }

        // 发送ajax请求
        $.ajax({
            url: "/FitnessEquipmentServlet",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(formData),
            success: function (result) {
                if (result) {
                    alert("添加成功");
                    location.href = 'index.html';

                }
            },
            error: function (xhr, status, error) {
                console.log("请求异常：" + status + " - " + error);
            }
        });
    }
</script>
</body>
</html>